<template>
    <ul class="tabs">
        <li class="tab" v-for="(item, idx) in list" :key="idx" :class="{ active: tabName ? item == tabName : activeTab == idx }" @click="handleClick(item, idx)">
            <span>{{item}}</span>
        </li>
    </ul>
</template>


<script>
export default {
    props: {
        list: {
            type: Array,
            required: true
        },
        tabName: {
            type: String,            
        }
    },

    data() {
        return {
            activeTab: 0
        }
    },

    methods: {
        handleClick(item, idx) {
            this.activeTab = idx
            this.$emit('toggle', [item, idx])
        }
    }
}
</script>


<style lang="less" scoped>
.tabs {
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 0;
    &>.tab {
        padding: .05rem;
        min-width: .8rem;
        text-align: center;
        list-style: none;
        &.active:not(:hover),
        &:hover {
            background: #e5ecff;
        }
        &>span {
            // padding: .5rem 0;
            // margin: .5rem 0;
            // line-height: 1.5;
            // margin: auto;
            // border-bottom: 2px solid blue;
        }
    }
}
</style>